React useMemo: našumo optimizavimas naudojant atmintizavimą (memoization)

React kūrimo pasaulyje našumas yra svarbiausias dalykas. Augant programų sudėtingumui, užtikrinti sklandžią ir jautrią vartotojo patirtį tampa vis svarbiau. Vienas iš galingų React įrankių, skirtų našumui optimizuoti, yra useMemo hook'as. Šis hook'as leidžia atmintizuoti arba talpinti (cache) brangių skaičiavimų rezultatus, taip išvengiant nereikalingų pakartotinių skaičiavimų ir gerinant jūsų programos efektyvumą.

Kas yra atmintizavimas (memoization)?

Iš esmės, atmintizavimas yra optimizavimo technika, naudojama funkcijoms pagreitinti, saugant brangių funkcijų iškvietimų rezultatus ir grąžinant išsaugotą rezultatą, kai vėl gaunami tie patys įvesties duomenys. Užuot pakartotinai atlikus skaičiavimą, funkcija tiesiog paima anksčiau apskaičiuotą reikšmę. Tai gali žymiai sumažinti funkcijos vykdymui reikalingą laiką ir išteklius, ypač dirbant su sudėtingais skaičiavimais ar dideliais duomenų rinkiniais.

Įsivaizduokite, kad turite funkciją, kuri skaičiuoja skaičiaus faktorialą. Didelio skaičiaus faktorialo skaičiavimas gali būti intensyvus skaičiavimo požiūriu. Atmintizavimas gali padėti saugant kiekvieno jau apskaičiuoto skaičiaus faktorialą. Kitą kartą, kai funkcija bus iškviesta su tuo pačiu skaičiumi, ji galės tiesiog paimti išsaugotą rezultatą, užuot jį perskaičiavusi.

Pristatome React useMemo

React useMemo hook'as suteikia būdą atmintizuoti reikšmes funkciniuose komponentuose. Jis priima du argumentus:

• Funkciją, kuri atlieka skaičiavimą.
• Priklausomybių masyvą.

useMemo hook'as iš naujo paleis funkciją tik tada, kai pasikeis viena iš priklausomybių masyve. Jei priklausomybės išlieka tokios pačios, jis grąžins talpykloje esančią reikšmę iš ankstesnio atvaizdavimo. Tai neleidžia funkcijai būti vykdomai be reikalo, o tai gali žymiai pagerinti našumą, ypač dirbant su brangiais skaičiavimais.

useMemo sintaksė

useMemo sintaksė yra paprasta:

const memoizedValue = useMemo(() => {
  // Sudėtingas skaičiavimas čia
  return computeExpensiveValue(a, b);
}, [a, b]);

Šiame pavyzdyje computeExpensiveValue(a, b) yra funkcija, kuri atlieka brangų skaičiavimą. Masyvas [a, b] nurodo priklausomybes. useMemo hook'as iš naujo paleis computeExpensiveValue funkciją tik jei pasikeis a arba b. Priešingu atveju, jis grąžins talpykloje esančią reikšmę iš ankstesnio atvaizdavimo.

Kada naudoti useMemo

useMemo yra naudingiausias šiais atvejais:

• Sudėtingi skaičiavimai: Kai turite funkciją, atliekančią skaičiavimo požiūriu intensyvią užduotį, pavyzdžiui, sudėtingus duomenų transformavimus ar didelių duomenų rinkinių filtravimą.
• Nuorodų lygybės patikrinimai: Kai reikia užtikrinti, kad reikšmė pasikeistų tik tada, kai pasikeičia jos pagrindinės priklausomybės, ypač perduodant reikšmes kaip props'us antriniams komponentams, kurie naudoja React.memo.
• Nereikalingų pervaizdavimų prevencija: Kai norite išvengti komponento pervaizdavimo, nebent jo props'ai ar būsena (state) iš tikrųjų pasikeitė.

Panagrinėkime kiekvieną iš šių scenarijų su praktiniais pavyzdžiais.

1 scenarijus: sudėtingi skaičiavimai

Apsvarstykite scenarijų, kai reikia filtruoti didelį vartotojų duomenų masyvą pagal tam tikrus kriterijus. Didelio masyvo filtravimas gali būti skaičiavimo požiūriu brangus, ypač jei filtravimo logika yra sudėtinga.

const UserList = ({ users, filter }) => {
  const filteredUsers = useMemo(() => {
    console.log('Filtruojami vartotojai...'); // Imituojamas brangus skaičiavimas
    return users.filter(user => user.name.toLowerCase().includes(filter.toLowerCase()));
  }, [users, filter]);

  return (
    

      {filteredUsers.map(user => (
        
{user.name}
      ))}
    
  );
};

Šiame pavyzdyje filteredUsers kintamasis yra atmintizuotas naudojant useMemo. Filtravimo logika yra vykdoma iš naujo tik tada, kai pasikeičia users masyvas arba filter reikšmė. Jei users masyvas ir filter reikšmė išlieka tokie patys, useMemo hook'as grąžins talpykloje esantį filteredUsers masyvą, taip išvengiant nereikalingo filtravimo logikos vykdymo.

2 scenarijus: nuorodų lygybės patikrinimai

Perduodant reikšmes kaip props'us antriniams komponentams, kurie naudoja React.memo, svarbu užtikrinti, kad props'ai pasikeistų tik tada, kai pasikeičia jų pagrindinės priklausomybės. Priešingu atveju, antrinis komponentas gali būti pervaizduotas be reikalo, net jei rodomi duomenys nepasikeitė.

const MyComponent = React.memo(({ data }) => {
  console.log('MyComponent pervaizduotas iš naujo!');
  return 
{data.value}
;
});

const ParentComponent = () => {
  const [a, setA] = React.useState(1);
  const [b, setB] = React.useState(2);

  const data = useMemo(() => ({
    value: a + b,
  }), [a, b]);

  return (
    

      
       setA(a + 1)}>Padidinti A
       setB(b + 1)}>Padidinti B
    
  );
};

Šiame pavyzdyje data objektas yra atmintizuotas naudojant useMemo. Komponentas MyComponent, apgaubtas React.memo, bus pervaizduotas tik tada, kai pasikeis data prop'sas. Kadangi data yra atmintizuotas, jis pasikeis tik tada, kai pasikeis a arba b. Be useMemo, naujas data objektas būtų sukurtas kiekvieno ParentComponent atvaizdavimo metu, todėl MyComponent būtų pervaizduojamas be reikalo, net jei a + b reikšmė liktų ta pati.

3 scenarijus: nereikalingų pervaizdavimų prevencija

Kartais galite norėti išvengti komponento pervaizdavimo, nebent jo props'ai ar būsena (state) iš tikrųjų pasikeitė. Tai gali būti ypač naudinga optimizuojant sudėtingų komponentų, turinčių daug antrinių komponentų, našumą.

const MyComponent = ({ config }) => {
  const processedConfig = useMemo(() => {
    // Apdorojamas konfigūracijos objektas (brangi operacija)
    console.log('Apdorojama konfigūracija...');
    let result = {...config}; // Paprastas pavyzdys, bet galėtų būti sudėtingas
    if (result.theme === 'dark') {
        result.textColor = 'white';
    } else {
        result.textColor = 'black';
    }
    return result;
  }, [config]);

  return (
    

      
{processedConfig.title}
      
{processedConfig.description}
    
  );
};

const App = () => {
  const [theme, setTheme] = React.useState('light');
  const config = useMemo(() => ({
      title: 'Mano programa',
      description: 'Tai pavyzdinė programa.',
      theme: theme
  }), [theme]);

  return (
    

      
       setTheme(theme === 'light' ? 'dark' : 'light')}>Perjungti temą
    
  );
};

Šiame pavyzdyje processedConfig objektas yra atmintizuotas remiantis config prop'su. Brangi konfigūracijos apdorojimo logika vykdoma tik tada, kai pasikeičia pats config objektas (t. y., kai pasikeičia tema). Svarbu tai, kad nors config objektas yra iš naujo apibrėžiamas App komponente kiekvieną kartą, kai App yra pervaizduojamas, useMemo naudojimas užtikrina, kad config objektas iš tikrųjų *pasikeis* tik tada, kai pasikeis pats theme kintamasis. Be useMemo hook'o App komponente, naujas config objektas būtų sukurtas kiekvieno App atvaizdavimo metu, todėl MyComponent kiekvieną kartą perskaičiuotų processedConfig, net jei pagrindiniai duomenys (tema) iš tikrųjų būtų tie patys.

Dažniausios klaidos, kurių reikėtų vengti

Nors useMemo yra galingas įrankis, svarbu jį naudoti protingai. Pernelyg didelis useMemo naudojimas gali iš tikrųjų pabloginti našumą, jei atmintizuotų reikšmių valdymo pridėtinės išlaidos viršija naudą, gaunamą išvengiant pakartotinių skaičiavimų.

• Perdėtas atmintizavimas: Neatmintizuokite visko! Atmintizuokite tik tas reikšmes, kurias tikrai brangu apskaičiuoti arba kurios naudojamos nuorodų lygybės patikrinimams.
• Neteisingos priklausomybės: Įsitikinkite, kad į priklausomybių masyvą įtraukėte visas priklausomybes, nuo kurių priklauso funkcija. Priešingu atveju, atmintizuota reikšmė gali pasenti ir sukelti netikėtą elgseną.
• Užmirštos priklausomybės: Pamiršus priklausomybę, gali kilti subtilių klaidų, kurias sunku atsekti. Visada dukart patikrinkite savo priklausomybių masyvus, kad įsitikintumėte, jog jie yra išsamūs.
• Ankstyvas optimizavimas: Neoptimizuokite per anksti. Optimizuokite tik tada, kai nustatėte našumo problemą. Naudokite profiliavimo įrankius, kad nustatytumėte kodo sritis, kurios iš tikrųjų sukelia našumo problemas.

useMemo alternatyvos

Nors useMemo yra galingas įrankis reikšmėms atmintizuoti, yra ir kitų metodų, kuriuos galite naudoti norėdami optimizuoti našumą React programose.

• React.memo: React.memo yra aukštesnės eilės komponentas (HOC), kuris atmintizuoja funkcinį komponentą. Jis neleidžia komponentui būti pervaizduotam, nebent pasikeitė jo props'ai. Tai naudinga optimizuojant komponentų, kurie nuolat gauna tuos pačius props'us, našumą.
• PureComponent (klasiniams komponentams): Panašiai kaip React.memo, PureComponent atlieka paviršutinišką props'ų ir būsenos (state) palyginimą, kad nustatytų, ar komponentas turėtų būti pervaizduotas.
• Kodo skaidymas (Code Splitting): Kodo skaidymas leidžia padalinti jūsų programą į mažesnius paketus, kurie gali būti įkeliami pagal poreikį. Tai gali pagerinti pradinį jūsų programos įkėlimo laiką ir sumažinti kodo, kurį reikia analizuoti ir vykdyti, kiekį.
• Debouncing ir Throttling: Tai metodai, naudojami apriboti funkcijos vykdymo dažnį. Tai gali būti naudinga optimizuojant įvykių apdorojimo funkcijų, kurios dažnai suveikia, pavyzdžiui, slinkties ar dydžio keitimo apdorojimo funkcijų, našumą.

Praktiniai pavyzdžiai iš viso pasaulio

Pažvelkime į keletą pavyzdžių, kaip useMemo gali būti taikomas įvairiuose kontekstuose visame pasaulyje:

• El. prekyba (pasaulinė): Pasaulinė el. prekybos platforma galėtų naudoti useMemo sudėtingų produktų filtravimo ir rūšiavimo operacijų rezultatams talpinti, užtikrinant greitą ir jautrią apsipirkimo patirtį vartotojams visame pasaulyje, nepriklausomai nuo jų buvimo vietos ar interneto ryšio greičio. Pavyzdžiui, vartotojas Tokijuje, filtruojantis produktus pagal kainų diapazoną ir prieinamumą, gautų naudos iš atmintizuotos filtravimo funkcijos.
• Finansų prietaisų skydelis (tarptautinis): Finansų prietaisų skydelis, rodantis realaus laiko akcijų kainas ir rinkos duomenis, galėtų naudoti useMemo skaičiavimų, susijusių su finansiniais rodikliais, tokiais kaip slankieji vidurkiai ar kintamumo matai, rezultatams talpinti. Tai neleistų prietaisų skydeliui tapti lėtam, kai rodomas didelis duomenų kiekis. Prekiautojas Londone, stebintis akcijų rezultatus, matytų sklandesnius atnaujinimus.
• Žemėlapių programa (regioninė): Žemėlapių programa, rodanti geografinius duomenis, galėtų naudoti useMemo skaičiavimų, susijusių su žemėlapių projekcijomis ir koordinačių transformacijomis, rezultatams talpinti. Tai pagerintų programos našumą priartinant ir stumdant žemėlapį, ypač dirbant su dideliais duomenų rinkiniais ar sudėtingais žemėlapių stiliais. Vartotojas, tyrinėjantis detalų Amazonės atogrąžų miškų žemėlapį, patirtų greitesnį atvaizdavimą.
• Kalbos vertimo programa (daugiakalbė): Įsivaizduokite kalbos vertimo programą, kuri turi apdoroti ir rodyti didelius išversto teksto gabalus. useMemo galėtų būti naudojamas teksto formatavimui ir atvaizdavimui atmintizuoti, užtikrinant sklandžią vartotojo patirtį, nepriklausomai nuo rodomos kalbos. Tai ypač svarbu kalboms su sudėtingais simbolių rinkiniais, pavyzdžiui, kinų ar arabų.

Išvada

useMemo hook'as yra vertingas įrankis optimizuojant React programų našumą. Atmintizuodami brangius skaičiavimus ir išvengdami nereikalingų pervaizdavimų, galite žymiai pagerinti savo kodo greitį ir efektyvumą. Tačiau svarbu naudoti useMemo protingai ir suprasti jo apribojimus. Pernelyg didelis useMemo naudojimas gali iš tikrųjų pabloginti našumą, todėl labai svarbu nustatyti kodo sritis, kurios iš tikrųjų sukelia našumo problemas, ir sutelkti savo optimizavimo pastangas į tas sritis.

Suprasdami atmintizavimo principus ir kaip efektyviai naudoti useMemo hook'ą, galite kurti aukšto našumo React programas, kurios teikia sklandžią ir jautrią vartotojo patirtį vartotojams visame pasaulyje. Nepamirškite profiliuoti savo kodą, nustatyti kliūtis ir strategiškai taikyti useMemo, kad pasiektumėte geriausių rezultatų.